<script setup lang="ts">
import { download, formatEnum, get, loadFile, message, post } from '@/utils'
import Modal from './Modal.vue'
import useModal from '@/hooks/useModal'
import useTable from '@/hooks/useTable'
import useValueEnum from '@/hooks/useValueEnum'
import { BtnPermission } from '@/enum/permission'
const { store } = useModal()
const { formatColumns } = useTable()
const searchQuery = reactive({})
const formRef = ref()
const actionRef = ref()

const pagination = {
  showPageSize: true,
  pageSize: 20,
}

const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = { ...params, size: params.pageSize, settleTimeBegin: params.times ? params.times[0] + ' 00:00:00' : '', settleTimeEnd: params.times ? params.times[1] + ' 23:59:59' : '' }
    Reflect.deleteProperty(query, 'pageSize')
    get(
      {
        url: '/server-shop/admin/order/settle/place/page',
        data: query,
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}
const total = reactive({ data: 0, data1: 0, data0: 0 })
const getTotal = () => {
  get({
    url: '/server-shop/admin/order/settle/place/total',
    data: formRef.value?.model,
  }).then(({ data }) => {
    Object.assign(total, data)
  })
}
onMounted(() => {
  getTotal()
})
const { valueEnum: seller } = useValueEnum('/server-shop/admin/seller/list')
const columns = formatColumns([
  {
    title: '分销员信息',
    dataIndex: 'user',
    fixed: 'left',
    children: [
      {
        title: '用户头像',
        dataIndex: 'userAvatar',
        valueType: 'image',
        width: 120,
      },
      {
        title: '用户昵称',
        width: 150,
        ellipsis: true,
        hideInSearch: false,
        dataIndex: 'userNickName',
      },
      {
        title: '用户手机',
        width: 150,
        hideInSearch: false,
        dataIndex: 'userMobile',
      },
    ],
  },
  {
    title: '客户信息',
    dataIndex: 'user',
    children: [
      {
        title: '用户头像',
        dataIndex: 'orderUserAvatar',
        valueType: 'image',
        width: 120,
      },
      {
        title: '用户昵称',
        width: 150,
        ellipsis: true,
        dataIndex: 'orderUserNickName',
      },
      {
        title: '用户手机',
        width: 150,
        dataIndex: 'orderUserMobile',
      },
    ],
  },
  {
    title: '商户',
    dataIndex: 'sellerId',
    width: 200,
    valueEnum: seller,
    hideInSearch: false,
  },

  {
    title: '订单号',
    dataIndex: 'orderNo',
    hideInSearch: false,
    width: 200,
  },
  {
    title: '支付金额',
    dataIndex: 'payAmount',
    width: 120,
  },
  {
    title: '运费',
    dataIndex: 'logisticsFee',
    width: 120,
  },
  {
    title: '支付单号',
    dataIndex: 'payNo',
    hideInSearch: false,
    width: 200,
  },
  {
    title: '外部支付单号',
    dataIndex: 'payBizNo',
    hideInSearch: false,
    width: 200,
    ellipsis: true,
  },

  {
    title: '结算类型',
    dataIndex: 'settleType',
    hideInSearch: false,
    width: 120,

    valueEnum: {
      direct: '直推',
      indirect: '间推',
    },
  },
  {
    title: '结算金额',
    dataIndex: 'settleAmount',
    width: 120,
  },

  {
    title: '退款金额',
    dataIndex: 'refundAmount',
    width: 120,
  },
  {
    title: '结算备注',
    dataIndex: 'settleRemark',
    width: 200,
    ellipsis: true,
  },
  {
    title: '结算状态',
    dataIndex: 'settleStatus',
    hideInSearch: false,
    width: 120,
    valueEnum: {
      '-1': { text: '结算失败', status: 'Error' },
      1: { text: '已结算', status: 'Success' },
      0: { text: '未结算', status: 'Processing' },
    },
  },
  {
    title: '结算方式',
    dataIndex: 'settleWay',
    hideInSearch: false,
    width: 120,
    valueEnum: {
      1: '二清',
      2: '分账',
    },
  },
  {
    title: '结算时间',
    dataIndex: 'settleTime',
    width: 200,
  },
  {
    title: '时间筛选',
    dataIndex: 'times',
    width: 200,
    valueType: 'dateRange',
    hideInTable: true,
    hideInSearch: false,
  },
  {
    title: '操作',
    dataIndex: 'options',
    width: 200,
    fixed: 'right',
    btnList: [
      {
        name: '手动结算',
        permission: BtnPermission.编辑,
        handle: ({ record }) => {
          post({ url: '/server-shop/admin/order/settle/place/clearing?ids=' + record.id, data: { ids: record.id } }, ({ code, msg }) => {
            if (code == 200) actionRef.value.reload()
            message({
              type: code == 200 ? 'success' : 'error',
              content: msg,
            })
          })
        },
      },
    ],
  },
])
</script>

<template>
  <div class="page">
    <ProTable
      :columns="columns"
      :request="request"
      @submit="getTotal"
      @reset="getTotal"
      row-key="id"
      :form-ref="ref => (formRef = ref)"
      :pagination="pagination"
      header-title=" "
      column-resizable
      :scroll="{ x: 1000 }"
      :params="searchQuery"
      :bordered="{ cell: true }"
      :action-ref="ref => (actionRef = ref)"
    >
      <template #option-render="{ dom, reset }">
        <component :is="dom[1]" />
        <component :is="dom[0]" />
      </template>
      <template #tool-bar>
        <div class="mb10">
          累计佣金:
          <span style="color: rgb(var(--link-6))">￥{{ total.data }}</span>
        </div>
        <div class="mb10">
          待结算:
          <span style="color: rgb(var(--link-6))">￥{{ total.data0 }}</span>
        </div>
        <div class="mb10">
          已结算:
          <span style="color: rgb(var(--link-6))">￥{{ total.data1 }}</span>
        </div>
      </template>
      <template #money="{ record }"> </template>
    </ProTable>
  </div>
</template>
